import React, { FC, useState } from 'react'
import Mytitle from '../../../../components/Mytitle'
import { Button, Cascader, Form, Input, message, Steps } from 'antd';
import {inject,observer} from 'mobx-react'
import { advicecatetory } from '../../../../utils';
import RichEditorFunc from './RichEditor';
import { ajax } from '../../../../api';
import { useNavigate } from 'react-router-dom';
const { Step } = Steps;

const Add:FC<any>=({
  uinfo
})=> {

  //步骤条信息
  const steps=[
    {
      title:"添加意见基本信息",
      description:"谢谢你的意见"
    },
    {
      title:"请完成意见的详细内容",
      description:"请你认真填写哦"
    },
    {
      title:"请提交你的宝贵意见",
      description:"欢迎再次提交"
    }
  ]

  const {userInfo}=uinfo
  const [form] = Form.useForm()
  const [obj,setObj] = useState<any>(null)
  let [current,setCurrent] = useState<number>(0)
  const navigate = useNavigate()
  const [content,setContent] = useState<any>(null)
  //上一步
  const prev=()=>{
    setCurrent(current-1)
  }
  //下一步
  const next=()=>{
    //第一步的表单，验证
    if(current==0){
      form.validateFields().then(values=>{
        setObj(values)  
        setCurrent(current+1)
      }).catch(err=>{
        message.error("请添加意见基本信息")
      })
    }
    //第二步，富文本编辑框
    else if(current==1){
      if(content){
        setCurrent(current+1)
      }else{
        message.error("请添加意见主要内容")
      }
    }
  }

  //得到富文本编辑框内容
  const getContent=(content:any)=>{
    console.log(content)
    setContent(content)
  }

  //点击提交意见
  const submitAdvise =async()=>{
    console.log(content)
    console.log(obj)
    let res=await ajax.addadvise({
      info:userInfo,
      content,
      ...obj
    })
    if(res.code==200){
      navigate('/home/mine/advise/list')
    }

  }
  return (
    <div style={{width:"100%",height:"450px",position:"relative"}}>
        <Mytitle text='意见新增'></Mytitle>
        <div>
          <Steps current={current}>
            {
              steps.map((item,index)=>(
                <Step key={index} title={item.title} description={item.description} />
              ))
            }
          </Steps>
        </div>
        <div style={{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",position:'relative',minHeight:400}}>

          {
            current==0&&<div style={{width:"400px",borderRadius:"10px",padding:"10px",marginTop:"20px"}}>
              <Form
                      name="normal_login"
                      className="myform"
                      form={form}
                      layout={"vertical"}
                  >
                      <Form.Item
                          name="title"
                          label="意见标题"
                          rules={[{ required: true, message: '请输入意见标题' }]}
                      >
                        <Input  placeholder="意见标题" />
                    </Form.Item>
                    <Form.Item 
                      name="category"
                      label="意见类别"
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <Cascader options={advicecatetory}  placeholder="请选择" />
                    </Form.Item>
                  </Form>
            </div>
          }
          {
            current==1&&<div style={{width:"700px",borderRadius:"10px",padding:"10px",height:"200px"}} >
              <RichEditorFunc
              getContent={getContent}
              content={content}
              >

              </RichEditorFunc>
            </div>
          }
           {
            current==2&&<div style={{position:"absolute",bottom:0,left:0,top:0,right:0,margin:'auto',width:250,height:50,display:"flex",flexDirection:"column",alignItems:"center"}}>
              <Mytitle text="请点击提交你宝贵的意见"></Mytitle>
              <Button danger onClick={submitAdvise }>提交意见</Button>
            </div>
          }

        </div>
        <p style={{position:"absolute",bottom:0,width:"100%",display:"flex",justifyContent:"space-between"}}>
  
          {
            current!=0 && <Button onClick={prev } style={{marginRight:"20px"}} danger>
                上一步 
            </Button>
          }
           {
            current!=steps.length-1 &&   <Button onClick={next} type="primary" style={{marginRight:10}}>
                下一步
              </Button>
          }
         

        </p>
    </div>
  )
}
export default inject('uinfo')(observer(Add))
